import { onMounted, onUnmounted, ref } from 'vue'

interface IOptions {
  /** 光源对象 */
  light?: {
    /** 宽度 */
    width?: number
    /** 高度 */
    height?: number
    /** 颜色 */
    color?: string
    /** 模糊度 */
    blur?: number
  }
}

/**
 * 导出一个名为useLightCard的hook函数，用于创建一个带有光晕效果的卡片
 * @param options 光源对象
 * @returns
 */
export const useLightCard = (options: IOptions = {}) => {
  // 创建一个ref，用于存储卡片DOM元素
  const cardRef = ref<HTMLDivElement | null>(null)
  // 创建一个变量，用于存储卡片原来的overflow属性
  let cardOverflow = ''
  // 创建一个ref，用于存储光晕DOM元素
  const lightRef = ref<HTMLDivElement>(document.createElement('div'))

  // 设置光晕的样式
  const setLightStyle = () => {
    // 从options中获取光晕的宽度、高度、颜色和模糊度，如果没有则使用默认值
    const {
      width = 60,
      height = 60,
      color = '#ff4132',
      blur = 40
    } = options.light ?? {}
    // 获取光晕DOM元素
    const lightDom = lightRef.value
    // 设置光晕的样式
    lightDom.style.position = 'absolute'
    lightDom.style.width = `${width}px`
    lightDom.style.height = `${height}px`
    lightDom.style.background = color
    lightDom.style.filter = `blur(${blur}px)`
  }

  // 设置卡片为overflow:hidden
  const setCardOverflowHidden = () => {
    // 获取卡片DOM元素
    const cardDom = cardRef.value
    if (cardDom) {
      // 保存原来的overflow属性
      cardOverflow = cardDom.style.overflow
      // 设置overflow为hidden
      cardDom.style.overflow = 'hidden'
    }
  }

  // 恢复卡片原来的overflow属性
  const restoreCardOverflow = () => {
    // 获取卡片DOM元素
    const cardDom = cardRef.value
    if (cardDom) {
      // 恢复原来的overflow属性
      cardDom.style.overflow = cardOverflow
    }
  }

  // 将光晕添加到卡片中
  const addLight = () => {
    // 获取卡片DOM元素
    const cardDom = cardRef.value
    if (cardDom) {
      // 将光晕添加到卡片中
      cardDom.appendChild(lightRef.value)
    }
  }

  // 将光晕从卡片中移除
  const removeLight = () => {
    // 获取卡片DOM元素
    const cardDom = cardRef.value
    if (cardDom) {
      // 将光晕从卡片中移除
      cardDom.removeChild(lightRef.value)
    }
  }

  // 鼠标进入卡片时触发
  const onMouseEnter = () => {
    // 添加光晕
    addLight()
    // 设置卡片为overflow:hidden
    setCardOverflowHidden()
  }

  // 鼠标在卡片上移动时触发
  const onMouseMove = (e: MouseEvent) => {
    // 获取鼠标的坐标
    const { clientX, clientY } = e
    // 获取卡片DOM元素
    const cardDom = cardRef.value
    if (cardDom) {
      // 获取卡片的位置和大小
      const { x, y } = cardDom.getBoundingClientRect()
      const { width, height } = lightRef.value.getBoundingClientRect()
      // 设置光晕的位置
      lightRef.value.style.left = `${clientX - x - width / 2}px`
      lightRef.value.style.top = `${clientY - y - height / 2}px`

      // 设置卡片旋转的最大角度
      const maxXRotation = 10,
        maxYRotation = 10

      // 设置卡片旋转的范围
      const rangeX = 200 / 2,
        rangeY = 200 / 2

      // 计算卡片旋转的角度
      const rotateX = ((clientX - x - rangeX) / rangeX) * maxXRotation
      const rotateY = ((clientY - y - rangeY) / rangeY) * maxYRotation

      // 设置卡片旋转的角度
      cardDom.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
    }
  }

  // 鼠标离开卡片时触发
  const onMouseLeave = () => {
    // 移除光晕
    removeLight()
    // 恢复卡片原来的overflow属性
    restoreCardOverflow()
  }

  // 组件挂载时触发
  onMounted(() => {
    // 设置光晕的样式
    setLightStyle()
    cardRef.value?.addEventListener('mouseenter', onMouseEnter)
    cardRef.value?.addEventListener('mousemove', onMouseMove)
    cardRef.value?.addEventListener('mouseleave', onMouseLeave)
  })

  onUnmounted(() => {
    cardRef.value?.removeEventListener('mouseenter', onMouseEnter)
    cardRef.value?.removeEventListener('mousemove', onMouseMove)
    cardRef.value?.removeEventListener('mouseleave', onMouseLeave)
  })

  return {
    cardRef
  }
}
